<template>
	<view>
		<view class="head">
			<image class="bg" :src="topicInfo.bg_image"></image>
			<view class="head-c">
				<text class="name">{{topicInfo.topic_name}}</text>
				<view class="count">
					<text>{{topicInfo.userCount}}个成员</text>
					<text>{{topicInfo.postCount}}个作品</text>
				</view>
				<view>
					<block v-if="isJoinTopic">
						<u-button @click="outTopic" size="mini">退出圈子</u-button>
					</block>
					<block v-else>
						<u-button type="error" @click="joinTopic" size="mini">加入圈子</u-button>
					</block>
					<u-button size="mini">活跃用户</u-button>
				</view>
			</view>
		</view>
		<!-- 发布按钮 -->
		<navigator :url="'/pages/plus-post/plus-post?topicId=' + topicId" hover-class="none">
			<view class="plus-box">
				<u-icon name="plus" color="#fff" size="50"></u-icon>
			</view>
		</navigator>
		<post-list :list="postList" :loadStatus="loadStatus"></post-list>
	</view>
</template>

<script>
	import postList from '../../components/post-list/post-list.vue';
	let page = 1;
	export default {
		components: {
			postList
		},
		data() {
			return {
				topicId: 0,
				topicInfo: {},
				postList: [],
				loadStatus: "loading",
				isJoinTopic: false
			};
		},
		onLoad(options) {
			this.topicId = options.id;
			this.getTopicInfo();
			this.getPostList();
			this.getIsJoinTopic();
		},
		onReachBottom() {
			page++;
			this.getPostList();
		},
		onPullDownRefresh() {
			this.postList = [];
			page = 1;
			this.getPostList();
			uni.stopPullDownRefresh();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.topicInfo.topic_name + '-'+ this.topicInfo.description,
				path: '/pages/topic-detail/topic-detail?id='+ this.topicId,
				imageUrl:this.topicInfo.cover_image
			}
		},
		methods: {
			joinTopic() {
				this.$H.post('/api/topic/joinTopic', {
					topicId: this.topicId,
					sessionKey: uni.getStorageSync("sessionKey")
				}).then(res => {
					if (res[1].data.code === 1) {
						this.isJoinTopic = true
					}
				});
			},
			outTopic() {
				this.$H.post('/api/topic/userTopicDel', {
					topicId: this.topicId,
					sessionKey: uni.getStorageSync("sessionKey")
				}).then(res => {
					if (res[1].data.code === 1) {
						this.isJoinTopic = false
					}
				});
			},
			getIsJoinTopic() {
				this.$H.post('/api/topic/isJoinTopic', {
					topicId: this.topicId,
					sessionKey: uni.getStorageSync("sessionKey")
				}).then(res => {
					if (res[1].data.code === 1) {
						this.isJoinTopic = true
					}
				});
			},
			getTopicInfo() {
				this.$H.post('/api/topic/topicDetail', {
					id: this.topicId
				}).then(res => {
					this.topicInfo = res[1].data;
					let topicList
					if (uni.getStorageSync("topicList") == "") {
						topicList = [];
					} else {
						topicList = uni.getStorageSync("topicList");
					}

					if (JSON.stringify(topicList).indexOf(JSON.stringify(res[1].data)) == -1) {
						topicList = topicList.concat(res[1].data);
						uni.setStorageSync("topicList", topicList);
					}
				});
			},
			getPostList() {
				this.loadStatus = "loading";
				this.$H.post('/api/post/topicPost?page=' + page, {
					topicId: this.topicId,
				}).then(res => {
					this.postList = this.postList.concat(res[1].data.data);
					if (res[1].data.current_page === res[1].data.last_page || res[1].data.last_page === 0) {
						this.loadStatus = "nomore";
					} else {
						this.loadStatus = "loadmore";
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import 'topic-detail.css';
</style>
